<template>
  <div>
    <a-form
      :form="form"
      layout="inline"
      @submit.prevent="onSubmit"
      id="department-search"
      :style="{ marginBottom: '20px' }"
    >
      <a-row>
        <a-col :span="16">
          <a-row>
            <a-col :span="8">
              <a-form-item>
                <a-input
                  placeholder="请输入部门编号或名称"
                  v-decorator="['name']"
                />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>
                <!-- <a-tree-select v-decorator="['pid']"
                                treeDefaultExpandAll
                                :treeData="tree"
                                placeholder="请选择部门"
                                >
                                </a-tree-select> -->
                <a-tree-select
                   allow-clear
                  v-decorator="['pid']"
                  placeholder="归属部门"
                  treeDefaultExpandAll
                  :treeData="tree"
                  :replace-fields="replaceFields"
                  ref="keys"
                ></a-tree-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>
                <a-select
                  v-decorator="['status']"
                  placeholder="请选择部门状态"
                  ref="stat"
                >
                  <a-select-option value="1"> 可用 </a-select-option>
                  <a-select-option value="0"> 停用 </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item>
                <a-button type="primary" html-type="submit" @click="findinfo"
                  >筛选</a-button
                >
              </a-form-item>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="8">
          <a-form-item :style="{ float: 'right' }">
            <a-button type="primary" @click="showCreate" icon="plus"
              >新增部门</a-button
            >
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

    <a-table
      :columns="columns"
      :dataSource="tableData"
      rowKey="id"
      :pagination="pagination"
      bordered
    >
      <span slot="action" slot-scope="text, record">
        <div class="delete-image">
          <router-link :to="'/department-update/' + record.id">
            <img src="./../../assets/images/view.svg" alt="" />
          </router-link>
          <a href="#" @click.stop.prevent="showModal(record)" v-if="record.id !== 1">
            <img src="./../../assets/images/delete.svg" alt="" />
          </a>
        </div>
      </span>
    </a-table>

    <a-modal
      v-model="showcreate"
      title="新增部门"
      @ok="createSubmit"
      @cancel="cancel"
      :cancelButtonProps="{ props: { type: 'primary' } }"
      centered
      :keyboard="false"
      okText="确认"
      :maskClosable="false"
    >
      <create
        ref="create"
        :departments="tree"
        @getList="getList"
        @getTree="getTree"
        @hideCreate="hideCreate"
      ></create>
    </a-modal>
    <a-modal
      v-model="visible"
      title="删除部门"
      @ok="handleDelete"
      width="450px"
      :cancelButtonProps="{ props: { type: 'primary' } }"
      centered
      :keyboard="false"
      okText="删除"
      :maskClosable="false"
    >
      
        <p>是否删除此部门？</p>
      
    <template slot="footer">
        <a-button type="warning" @click="visible=false">取消</a-button>
        <a-button type="primary" @click="handleDelete">确定</a-button>
    </template>
    </a-modal>
  </div>
</template>

<script>
import Create from "./create";
export default {
  components: { Create },
  data() {
    return {
      pagination: {
        current: 1,
        total: 0,
        pageSize: 10,
        showQuickJumper: true,
        onChange: (page, size) => {
          this.handleChange(page, size);
        },
      },
      form: this.$form.createForm(this),
      tableData: [],
      replaceFields: {
        title: "name",
        key: "id",
        value: "id",
        children:"children"
      },
      columns: [
        {
          title: "部门编号",
          dataIndex: "number",
          align: "center",
          width: "25%",
        },
        { title: "部门名称", dataIndex: "name", align: "center", width: "20%" },
        {
          title: "上级部门",
          dataIndex: "parentName",
          align: "center",
          width: "20%",
        },
        {
          title: "部门状态",
          dataIndex: "statusName",
          align: "center",
          width: "20%",
        },
        {
          title: "操作",
          scopedSlots: { customRender: "action" },
          align: "center",
          width: "15%",
        },
      ],
      search: {},
      showcreate: false,
      visible: false,
      deleteRow: {},
      tree: [],
      keywords: "",
    };
  },

  mounted() {
    this.getList();
    this.getTree();
  },
  methods: {
    //筛选
    async findinfo() {
      let [name, status] = [this.$refs.keys.value, this.$refs.stat.value];
      let {
        data: { data, totalCount },
      } = await this.http("get", "/department/selectLikeList", {
        name,
        status,
      });
      let result = data || [];
      result.forEach((item) => {
        if (!item.parentName) {
          item.parentName = "--";
        }
      });
      this.tableData = result.reverse();
      this.pagination.total = totalCount;
    },
    async getList(param = {}) {
      let req = {
        pageSize: this.pagination.pageSize,
        pageNo: this.pagination.current,
      };

      let {
        data: { data, totalCount },
      } = await this.http(
        "get",
        "/department/selectLikeList",
        Object.assign(req, param)
      );

      let result = data || [];
      result.forEach((item) => {
        if (!item.parentName) {
          item.parentName = "--";
        }
      });
      this.tableData = result.reverse();
      this.pagination.total = totalCount;
    },
    async getTree() {
      let { data } = await this.http("get", "/department/tree");
      console.log(data, 1);
      this.tree = data || [];
      // this.tree = this.createTree(data || [])
    },
    createTree(data) {
      let tree = [];
      data.map((item) => {
        let { name, id } = item;
        item.label = name;
        item.value = id;
        item.children = data.filter((f) => f.pid == item.id);
        if (item.pid === 0 && item.children.length) {
          tree.push(item);
        }
      });
      return tree;
    },
    onSubmit() {
      //搜索提交
      this.form.validateFields((err, values) => {
        if (!err) {
          this.pagination.current = 1;
          this.search = values;
          this.getList(values);
        }
      });
    },
    showCreate() {
      this.showcreate = true;
    },
    hideCreate() {
      this.showcreate = false;
    },
    showModal(row) {
      this.visible = true;
      this.deleteRow = row;
    },
    createSubmit() {
      //新增提交
      this.$refs.create.onSubmit();
    },
    handleChange(page, size) {
      //列表展示条数改变
      this.pagination.current = page;
      this.pagination.pageSize = size;
      this.getList(this.search);
    },
    cancel() {
      this.$refs.create.form.resetFields();
    },
    async handleDelete() {
      let that = this;
      let row = this.deleteRow;
      let { status, message } = await that.deleteData(row.id);
      if (status === 1) {
        that.$message.success("删除成功", 1);
        that.getList();
        that.getTree();
      } else {
        that.$message.error(message, 1);
      }

      this.visible = false;
    },
    async deleteData(id) {
      let data = await this.http("delete", `/department/delete/${id}`);
      return data || {};
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
#department-search {
  .ant-input {
    width: 242px;
  }

  .ant-select {
    width: 180px;
  }
}

.confirm-delete-wrapper {
  width: 100%;
  padding: 20px;
  text-align: center;
  p {
    font-size: 16px;
  }
}

@media screen and (max-width: 1366px) {
  #department-search {
    .ant-input {
      width: 200px;
    }

    .ant-select {
      width: 148px;
    }
  }
}
</style>
